<#assign pageTitle = "直播首页" />
<#assign pageHeader>
	<script type="text/javascript" src="/static/libs/swiper/swiper-bundle.min.js"></script>
	<script type="text/javascript" src="/static/js/live/live-index.js?l=1"></script>
</#assign>
<#assign pageContent>
<div class="i-slide banner-slide">
	<section>
		<!-- 如果需要导航按钮 -->
		<a class="arrow-left s-arrow" href="javascript:void(0)"></a>
		<a class="arrow-right s-arrow" href="javascript:void(0)"></a>
		<!-- 图片位置 -->
		<div class="swiper-container">
			<div class="swiper-wrapper">
				<#list websiteImages.type_18 as image >
					<div class="swiper-slide">
						<a target="_blank" href="<#if image.linkAddress??>${image.linkAddress}</#if>">
							<img class="imgload" src="${staticSite}${image.imagesUrl}" alt="${image.title}">
						</a>
					</div>
				</#list>
			</div>
		</div>
		<!-- 如果需要分页器 -->
		<div class="pagination"></div>
	</section>
</div>
<!-- /index slide -->
<div id="aCoursesList" class="of">
    <!-- live course 开始 -->
	<!-- /直播课程 开始 -->
	<div class="of bg-fff">
		<section class="container">
			<header class="comm-title">
					<span class="fr mt15 mr10 hyh">
						<a class="c-master" href="/live/list.html" title="更多" onclick="">更多</a>
					</span>
				<h2 class="fl tac tit-header">
					<span class="c-333">近期直播</span>
				</h2>
			</header>
			<div>
				<article class="comm-course-list of demo2-i-live-list">
					<#if courseDTOS??>
						<ul class="of">
							<#list courseDTOS as course>
								<li>
									<div class="cc-l-wrap in-live-ing">
										<div class="cc-l-wrap-top">
											<section class="course-img">
												<a href="/course/view/${course.courseId}.html">
													<#if course.courseLogo??>
														<img src="${staticSite}${course.courseLogo }"  class="img-responsive" alt="${course.courseName }">
													 <#else>
														 <img  src="/static/qdxwx/img/coures.gif" class="img-responsive" alt="${course.courseName }">
													</#if>
												</a>
												<#if course.liveBeginTime?datetime lt .now?datetime && course.liveEndTime?datetime gt .now?datetime>
													<div class="in-2-mask">
														<a href="/course/view/${course.courseId}.html" class="f-fM zbz">直播中</a>
													</div>
												</#if>
												<#if course.liveBeginTime?datetime gt .now?datetime && course.liveEndTime?datetime gt .now?datetime>
													<div class="in-2-mask">
														<a href="/course/view/${course.courseId}.html" class="f-fM wks">未开始</a>
													</div>
												</#if>
												<#if course.liveEndTime?datetime lt .now?datetime>
													<div class="in-2-mask">
														<a href="/course/view/${course.courseId}.html" class="f-fM yjs">已结束</a>
													</div>
												</#if>
											</section>
											<section class="">
												<h3 class="hLh30 txtOf mt5">
													<a class="course-title fsize16 c-333" title="${course.courseName }" href="/course/view/${course.courseId}.html">${course.courseName }</a>
												</h3>
												<section class="mt10 hLh20 of">
													<span class="fr"><tt class=" fsize14 f-fG  c-master">￥${course.price/100}</tt></span>
														<span class="fl jgAttr c-ccc f-fA">
															<tt class="c-999 f-fA">用户： ${course.buyCount}人</tt>
														</span>
												</section>
											</section>
										</div>
										<div class="cc-l-wrap-bottom">
											<div class="in-live-line pr">
												<#if course.liveBeginTime?datetime lt .now?datetime && course.liveEndTime?datetime gt .now?datetime>
													<a href="/course/view/${course.courseId}.html" class="pa d2-live-ing d2-live-pic">
														<img src="/static/qdxwx/img/d2-live-ing.gif">
													</a>
												</#if>
												<#if course.liveBeginTime?datetime gt .now?datetime && course.liveEndTime?datetime gt .now?datetime >
													<a href="/course/view/${course.courseId}.html" class="pa d2-live-wks d2-live-pic">
														<img src="/static/qdxwx/img/d2-live-wks.png">
													</a>
												</#if>
												<#if course.liveEndTime?datetime lt .now?datetime>
													<a href="/course/view/${course.courseId}.html" class="pa d2-live-yjs d2-live-pic">
														<img src="/static/qdxwx/img/d2-live-yjs.png">
													</a>
												</#if>
											</div>
											<section class="clearfix  pl10 pr10 mt20">
												<div class="fl">
													<span class="c-666 fsize14 f-fM vam">主讲:</span>
													<span class="c-666 fsize14 f-fM vam">
														<#list course.teacherList as teacherList>
															<#if teacherList_index==0>
																${teacherList.name}
															</#if>
															<#if teacherList_index!=0 && teacherList_index <2 >
																/${teacherList.name}
															</#if>
														</#list>
																<#if course.teacherList?size>2>
																	...
																</#if>
													</span>
												</div>
												<div class="fr">
													<span class="c-666 fsize14 f-fM vam">${course.liveBeginTime?string("MM-dd")}"---${course.liveEndTime?string("MM-dd")}</span>
												</div>
											</section>
										</div>
									</div>
								</li>
							</#list>
						</ul>
						<#else>
							<section class="no-data-wrap">
								<em class="icon30 no-data-ico">&nbsp;</em> <span class="c-666 fsize14 ml10 vam">没有相关数据，小编正在努力整理中...</span>
							</section>
					</#if>
				</article>
			</div>
		</section>
	</div>
	<!-- live course 手机端结束 -->
	<div class="bg-f8 of mt30">
		<section class="container">
			<header class="comm-title">
				<span class="fr mt15 mr10 hyh">
					<a class="c-master" href="/live/list.html" title="更多" onclick="">更多</a>
				</span>
				<h2 class="fl tac tit-header">
					<span class="c-333">直播推荐</span>
				</h2>
			</header>

			<#if liveRecommend??>
				<article>
					<div class="comm-course-list of in-n-lv-tj">
						<ul>
							<#list liveRecommend as course>
								<li>
									<div class="cc-l-wrap">
										<section class="course-img">
											<a href="/course/view/${course.courseId}.html">
												<#if course.cover??>
													<img src="${staticSite}${course.cover}"  class="img-responsive" alt="${course.courseName }">
												<#else>
													<img src="/static/qdxwx/img/coures.gif" class="img-responsive" alt="${course.courseName }">
												</#if>
											</a>
										</section>
										<div class="coure-bg-g">
											<h3 class="hLh30 txtOf mt5 in-live-name">
												<a class="course-title fsize16 c-333" title="${course.courseName }" href="/course/view/${course.courseId}.html">${course.courseName }</a>
												<a class="live-zt live-zt-ing" href="/course/view/${course.courseId}.html">
													<#if course.courseNodeList[0].liveBeginTime?long lt .now?long && course.courseNodeList[0].liveEndTime?long gt .now?long><img src="/static/qdxwx/img/live-ing.gif"></#if>
													<#if course.courseNodeList[0].liveBeginTime?long gt .now?long && course.courseNodeList[0].liveEndTime?long gt .now?long><img src="/static/qdxwx/img/live-wks.png"></#if>
													<#if course.courseNodeList[0].liveEndTime?long lt .now?long><img src="/static/qdxwx/img/live-over.png"></#if>
												</a>
											</h3>
											<section class="mt10 hLh20 of">
											<span class="fr">
												<#if course.price?string=='0.00'>
													<tt class="c-green fsize12 f-fA">免费</tt>
												<#else>
													<tt class="c-master fsize14 f-fM">￥${course.price/100}</tt>
												</#if>
											</span>
											<span class="fl jgAttr c-ccc f-fA">
												<tt class="c-999 f-fA">${course.viewCount!}浏览</tt>
											</span>
											</section>
										</div>
									</div>
								</li>
							</#list>
						</ul>
					</div>
				</article>
				<#else>
					<section class="no-data-wrap">
						<em class="icon30 no-data-ico">&nbsp;</em> <span class="c-666 fsize14 ml10 vam">没有相关数据，小编正在努力整理中...</span>
					</section>
			</#if>
		</section>
	</div>
	<div class="bg-fff of">
		<section class="container">
			<header class="comm-title">
				<div class="live-small-tit">
					<span class="fr mt15 mr10 hyh">
						<a class="c-master" href="/live/list.html" title="更多" onclick="">更多</a>
					</span>
					<h2 class="fl tac tit-header">
						<span class="c-333">最新直播</span>
					</h2>
				</div>
			</header>
			<article class="live-no-title">
				<div class="comm-course-list of">
					<div class="com-live-no-box" >
						<div class="c-l-n-left">
							<ul>
								<li class="liv-fist-box">
									<div class="cc-l-wrap" style="background:url('${websiteImages.type_22[0].imagesUrl}') ">
									</div>
								</li>
							</ul>
						</div>
						<div class="c-l-n-right">
							<#if newCourseList??>
								<ul class="clearfix">
									<#list newCourseList as course>
										<li>
											<div class="cc-l-wrap">
												<section class="course-img">
													<a href="/course/view/${course.courseId}.html">
														<#if course.cover??>
															<img src="${staticSite}${course.cover}"  class="img-responsive" alt="${course.courseName }">
														<#else >
															<img  src="/static/qdxwx/img/coures.gif" class="img-responsive" alt="${course.courseName }">
														</#if>
													</a>
												</section>
												<div class="coure-bg-g">
													<h3 class="hLh30 txtOf mt5">
														<a class="course-title fsize16 c-333" title="${course.courseName }" href="/course/view/${course.courseId}.html">${course.courseName }</a>
													</h3>
													<section class="mt10 hLh20 of">
														<span class="fr">
															<#if course.price?string=='0.00'>
																<tt class="c-green fsize12 f-fA">免费</tt>
															<#else>
																<tt class="c-master fsize14 f-fM">￥${course.price/100}</tt>
															</#if>
														</span>
														<span class="fl jgAttr c-ccc f-fA">
															<tt class="c-999 f-fA">${course.viewCount}浏览</tt>
														</span>
													</section>
												</div>
											</div>
										</li>
									</#list>
								</ul>
								<#else>
									<section class="no-data-wrap">
										<em class="icon30 no-data-ico">&nbsp;</em> <span class="c-666 fsize14 ml10 vam">没有相关数据，小编正在努力整理中...</span>
									</section>
							</#if>
						</div>
					</div>
					<div class="clearfix"></div>
				</div>
			</article>
		</section>
	</div>
	<div class="bg-f8 of mt30">
		<section class="container">
			<header class="comm-title">
				<div class="live-small-tit">
					<span class="fr mt15 mr10 hyh">
						<a class="c-master" href="/live/list.html" title="更多" onclick="">更多</a>
					</span>
					<h2 class="fl tac tit-header">
						<span class="c-333">专业课程</span>
					</h2>
					<ul class="clearfix">
						<li class="current" id="categoryId0" onclick="liveRecommended(0,this)">
							<a href="javascript:void(0)">全部</a>
						</li>
						<#list  categoryRoots as category>
							<#if subject_index < 4>
								<li onclick="liveRecommended(${category.categoryId},this)">
									<a href="javascript:void(0)">${category.categoryName}</a>
								</li>
							</#if>
						</#list>
					</ul>
				</div>
			</header>
			<section class="live-mobile-fl">
				<a id="categoryId0mobile" href="javascript:void(0)" onclick="liveRecommended(0,this)">全部</a>
				<#list categoryRoots as category>
					<#if subject_index<4>
						<a href="javascript:void(0)" onclick="liveRecommended(${category.categoryId},this)">${category.categoryName}</a>
					</#if>
				</#list>
			</section>
			<article class="live-no-title">
				<div class="comm-course-list of">
					<div class="com-live-ph-box">
						<div class="c-l-n-right" id="liveRecommend">

						</div>
						<div class="c-l-n-phb">
							<div class="c-l-phb-tit clearfix">
								<a href="javascript:void(0)" class="current">免费排行</a>
								<a href="javascript:void(0)">收费排行</a>
							</div>
							<div class="cl-phb">
								<div class="c-l-phb-box">
									<ul>
										<#list freeCourseList as course>
											<li>
												<span class="phb-in <#if course_index < 3 >phb-top</#if> ">
													${course_index+1}
												</span>
												<a href="/course/view/${course.courseId}.html" class="hLh30 txtOf fsize16 c-666 f-fM ">${course.courseName}</a>
												<div class="hLh20 of">
													<span class="fsize12 f-fM c-999">
														<#if course.courseNodeList[0].liveBeginTime??>
															${course.courseNodeList[0].liveBeginTime?string("yyyy-MM-dd HH:mm")} 开播
														<#else>
															没有直播
														</#if>
													</span>
												</div>
											</li>
										</#list>
									</ul>
								</div>
								<div class="c-l-phb-box undis">
									<ul>
										<#list chargeCourseList as course >
											<li>
												<span class="phb-in <#if course_index < 3 >phb-top</#if>">
														${course_index+1}
												</span>
												<a href="/course/view/${course.courseId}.html" class="hLh30 txtOf fsize16 c-666 f-fM ">${course.courseName}</a>
												<div class="hLh20 of">
													<span class="fsize12 f-fM c-999">
														<#if course.courseNodeList[0].liveBeginTime??>
															${course.courseNodeList[0].liveBeginTime?string("yyyy-MM-dd HH:mm")} 开播
														<#else>
															没有直播
														</#if>
													</span>
												</div>
											</li>
										</#list>
									</ul>
								</div>
							</div>
						</div>
					</div>
					<div class="clearfix"></div>
				</div>
			</article>
		</section>
	</div>
	<div class="bg-fff of">
		<section class="container">
			<header class="comm-title">
					<span class="fr mt15 mr10 hyh">
						<a class="c-master" href="/teacher/list.html" title="更多" onclick="">更多</a>
					</span>
				<h2 class="fl tac tit-header">
					<span class="c-333">专家直播</span>
				</h2>
			</header>
			<article class="live-no-title">
				<div class="demo-teach-warp">
					<ul class="clearfix demo-teach-list">
						<#list teacherList as teacher>
							<li>
								<div class="demo-t-l-warp">
									<a class="pic" href="/teacher/view/${teacher.id}.html" title="${teacher.name}" target="_self">
										<#if teacher.avatar??>
											<img alt="${teacher.name}"  src="${staticSite}${teacher.avatar}">
										<#else>
											<img alt="${teacher.name}" src="/static/qdxwx/img/avatar-boy.gif" >
										</#if>
									</a>
									<h4 class="hLh30 tac txtOf unFw">
										<a class="name fsize18 c-333 f-fM" href="/teacher/view/${teacher.id}.html">${teacher.name}</a>
									</h4>
									<input value="1" type="hidden">
									<h5 class="hLh30 fsize14 c-999 f-fM tac txtOf unFw">${teacher.education }</h5>
									<div class="mt15 i-q-txt">
										<input value="2" type="hidden">
										<p class="c-999 f-fA">${teacher.intro }</p>
									</div>
								</div>
							</li>
						</#list>
					</ul>
				</div>
			</article>
		</section>
	</div>
</div>
</#assign>
<#include "../layouts/layout.ftl">